<template>
    <div class="wrapper">
        <div class="btn-add">
            <!--vant上传图片-->
            <!--<van-uploader style="height: 100%;width: 100%" class="center" :after-read="onRead">-->
            <!--<div class="flex-c">-->
            <!--<svg class="icon" aria-hidden="true">-->
            <!--<use xlink:href="#icon-xiangji"></use>-->
            <!--</svg>-->
            <!--<span v-text="getTxt"></span>-->
            <!--</div>-->
            <!--</van-uploader>-->
            <div class="flex-c">
                <input type="file" class="add" @change="addImg">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiangji"></use>
                </svg>
                <span v-text="getTxt"></span>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">

    export default {
        name: 'btn-add-img',

        data() {
            return {};
        },
        props: {
            maxNum: {
                required: true,
                type: Number,
                default: -1
            }
        },

        components: {},

        methods: {
            addImg(e) {
                let file = e.target.files[0];
                let src = this.getObjectURL(file);
                this.$emit('addPic', file, src);
            },
            onRead(file) {
                this.$emit('addPic', file.content);
            },
            getObjectURL(file) {
                // 判断浏览器是否支持 createObjectURL api
                let url = null;
                if (window.createObjectURL != undefined) {
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            }
        },
        computed: {
            getTxt() {
                if (this.maxNum > 0) {
                    return '最多选' + this.maxNum + '张';
                } else {
                    return '';
                }
            }
        },
        watch: {
            // 监听具体数据变化，并做相应的处理
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';
    .flex-r
        flex-x()

    .flex-c
        flex-y()

    .center
        flex-center()

    .divider
        divider()

    .space
        space()

    .btn-add
        width 100%
        height 100%
        border 1px dashed gray9
        word-vw(vw(10), gray9)
        flex-y()
        border-radius vw(8)
        position relative

    .icon
        fill: gray9
        margin-bottom 1vw
        width vw(28)
        height vw(28)

    .add {
        width: 100%
        height: 100%
        opacity: 0;
        position absolute
    }
</style>
